<template>
  <div>
    <div class="table-page-search-wrappers" v-if="$auth('PROJECT_BOARD.FEE_APPLY_LIST')">
      <a-form-model
        :labelCol="{ span: 8 }"
        :wrapperCol="{ span: 14 }"
        :model="queryParam"
        ref="formRef"
      >
        <a-row>
          <!-- 研究中心 -->
          <a-col :sm="8"  :md="6" :lg="6">
            <a-form-model-item :label="$t('all.autotext949')" prop="orgId">
              <a-select v-model="queryParam.orgId" allowClear :placeholder="$t('all.autotext1348')"
                        option-filter-prop="children" show-search filter
              >
                <a-select-option v-for="item in allCenterList" :key="item.id" :value="item.id">
                  <a-tooltip :title="item.researchCenterNo + '-' + item.orgName">
                    {{ item.researchCenterNo }}-{{ item.orgName }}
                  </a-tooltip>
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <!-- 费用类型 -->
          <a-col :sm="8"  :md="6" :lg="6">
            <a-form-model-item :label="$t('all.autotext765')" prop="type">
              <a-select v-model="queryParam.type" :placeholder="$t('all.autotext1348')" default-value="" allowClear
                        @change="listVisitStageChange"
              >
                <a-select-option v-for="item in $const.SUBJECTANDREESA" :key="item.value" :value="item.value">
                  {{ item.desc }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <!-- 访视阶段 -->
          <a-col
            :md="6"
            :sm="8"
            :lg="4"
            v-if="queryParam.type === 2"
          >
            <a-form-item :label="$t('all.autotext1049')">
              <a-select v-model="queryParam.stageId" allowClear @change="listVisitStageChange">
                <a-select-option v-for="item in listVisitStageOption" :value="item.stageId" :key="item.stageId">
                  {{ item.visitName }}:{{ item.stage }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!-- 费用类目 -->
          <a-col :sm="8"  :md="6" :lg="6">
            <a-form-model-item :label="$t('all.autotext1507')" prop="applyType">
              <a-select v-model="queryParam.applyType" allowClear :disabled="applyTypeDisabled">
                <a-select-option v-for="item in categoryOptions" :value="item" :key="item">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <!-- 申请时间 -->
          <a-col :sm="8"  :md="6" :lg="6">
            <a-form-model-item :label="$t('all.autotext244')" prop="time">
              <a-range-picker v-model="timeArr" allowClear @change="changeCreateTime"/>
            </a-form-model-item>
          </a-col>
          <!-- 付款时间 -->
          <a-col :sm="8"  :md="6" :lg="6">
            <a-form-model-item :label="$t('all.autotext82')" prop="">
              <a-range-picker v-model="timeApplyArr" allowClear @change="changePayTime"/>
            </a-form-model-item>
          </a-col>
          <!-- 费用金额 -->
          <a-col :sm="8"  :md="6" :lg="6">
            <a-form-model-item :label="$t('all.autotext458')" prop="">
              <a-input onkeyup="value=value.replace(/[^\d.]/g,'')" v-model="queryParam.sAmount" style="width:40%" />
              <span style="margin:0 10px">~</span>
              <a-input onkeyup="value=value.replace(/[^\d.]/g,'')" v-model="queryParam.bAmount" style="width:40%" />
            </a-form-model-item>
          </a-col>
          <!-- 审核状态 -->
          <a-col :sm="8"  :md="6" :lg="6">
            <a-form-model-item :label="$t('all.autotext1158')" prop="status">
              <a-select v-model="queryParam.status" allowClear>
                <a-select-option v-for="item in $const.EXAMINE_TYPE" :value="item.value" :key="item.value">
                  {{ item.desc }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <!-- 受试者编号 -->
          <a-col :sm="8"  :md="6" :lg="6">
            <a-form-model-item :label="$t('all.autotext1357')" prop="ptsNo">
              <a-input v-model="queryParam.ptsNo"></a-input>
            </a-form-model-item>
          </a-col>
          <!-- 当前审核节点 -->
          <a-col :sm="8"  :md="6" :lg="6">
            <a-form-model-item :label="$t('all.autotext1687')" prop="roleId">
              <a-select v-model="queryParam.roleId" :placeholder="$t('all.autotext1348')" allowClear
                        @change="roleChange"
              >
                <a-select-option v-for="item in roleList" :key="item.id" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <!-- 支付方式-->
          <a-col :sm="8"  :md="6" :lg="6">
            <a-form-model-item :label="$t('all.autotext1787')" prop="offline">
              <a-select v-model="queryParam.offline" :placeholder="$t('all.autotext1348')" allowClear>
                <a-select-option v-for="item in $const.OFFLINE_TYPE" :key="item.value" :value="item.value">
                  {{ item.desc }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :sm="8"  :md="6" :lg="6">
            <a-space>
              <a-button type="primary" @click="$refs.table.refresh(true)">
                {{ $t('all.autotext30') }}
              </a-button>
              <a-button @click="handleReast">{{ $t('all.autotext340') }}</a-button>
              <a-button :loading="exporting" icon="export" @click="clickExport"
                        v-if="$auth('PROJECT.FEE_APPLY_LIST_EXPORT')"
              >
                {{ $t('all.autotext1014') }}
              </a-button>
              <a-button v-if="checkPackStatus === '0'">正在打包...</a-button>
              <a-button @click="downloadFile" type="primary" v-else-if="checkPackStatus === '1'">{{ $t('all.autotext1915') }}</a-button>
              <a-button
                @click="onPack"
                type="primary"
                v-else-if="checkPackStatus === '2' || checkPackStatus === '3'"
              >
              {{ $t('all.autotext1914') }}
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form-model>
  
      <s-table
        ref="table"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        :scroll="{ x: 'max-content', y: 500 }"
      >
        <template slot="operate" slot-scope="text, record" v-if="$auth('PROJECT.FEE_APPLY_LIST_SEARCH')">
          <a @click="clickViewDetail(record)">{{ $t('all.autotext568') }}</a>
        </template>
        <template slot="applyReason" slot-scope="text">
          <a-popover>
            <template slot="content">
              <div class="reason-wrap">{{text}}</div>
            </template>
            <span class="reason">{{ text }}</span>
          </a-popover>
        </template>
      </s-table>
      <a-row v-if="$auth('PROJECT.FEE_APPLY_LIST_TIME')" class="apply-row">
        <a-col :span="typeof dataInfo.listActCanUse ==='number' || typeof dataInfo.listActCanPay ==='number'  ? 6 : 11" class="apply-col border">
          <a-descriptions :title="$t('all.autotext1045')" :column="2">
            <a-descriptions-item v-for="(item, i) in applyNum" :key="i" :label="item.name">
              {{ item.num }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="8" class="apply-col">
          <a-row>
            <a-col
              :span="12"
              v-for="(item, i) in costNum"
              :key="i"
              class="apply-cost-col"
            >
              <span class="apply-cost-col-name">{{ item.name }}:</span>
              <span class="apply-cost-col-num"><em> ¥</em>{{ item.num }}</span>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :span="12"
              v-for="(item, i) in costNumBreak"
              :key="i"
              class="apply-cost-col-break"
            >
              <span class="">{{ item.name }}:</span>
              <span class=""> ¥{{ item.num }}</span>
            </a-col>
          </a-row>

     

          <div class="apply-service" v-if="serviceCharge">
            <span>{{ $t('all.autotext382.1') }}：</span>
            <span>{{ serviceCharge }}</span>
          </div>
        </a-col>
        <a-col :span="5" class="apply-col mt">
          <a-row>
            <a-col  class="apply-cost-col-break">
              <span class="">{{ $t('all.autotext1916') }}:</span>
              <span class=""> ¥{{ (dataInfo.listCanUse || 0).toFixed(2) }}</span>
            </a-col>
            <a-col  class="apply-cost-col-break">
              <span class="">{{ $t('all.autotext1917') }}:</span>
              <span class=""> ¥{{ (dataInfo.studyListCanUse || 0).toFixed(2) }}</span>
            </a-col>
            <a-col class="apply-cost-col-break">
              <span class="">{{ $t('all.autotext1918') }}:</span>
              <span class=""> ¥{{ (dataInfo.serverListCanUse || 0).toFixed(2) }}</span>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="5" v-if="typeof dataInfo.listActCanUse ==='number' || typeof dataInfo.listActCanPay ==='number'  " class="apply-col mt">
          <a-row>
            <a-col  v-if="typeof dataInfo.listActCanUse ==='number'" class="apply-cost-col-break">
              <span class="">{{ $t('all.autotext1919') }}:</span>
              <span class=""> ¥{{ (dataInfo.listActCanUse || 0).toFixed(2) }}</span>
            </a-col>
            <a-col  v-if="typeof dataInfo.listActCanPay ==='number'" class="apply-cost-col-break">
              <span class="">{{ $t('all.autotext1920') }}:</span>
              <span class=""> ¥{{ (dataInfo.listActCanPay || 0).toFixed(2) }}</span>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <a-col span="24"
           v-if="($auth('PROJECT.PROJECT_PAY_V2') || $auth('PROJECT.PROJECT_BUDGET_V2') || $auth('PROJECT.PROJECT_INCOME_V2'))"
    >
      <div v-if="!isHome">
        <!-- 付款明细、项目预算、资金流水 -->
        <div>
          <a-tabs :activeKey="isFinanceDetailSkip" size="large" @change="handleTabsChange">
            <a-tab-pane
              key="1"
              :tab="$t('all.autotext1004')"
              v-if="$auth('PROJECT.PROJECT_PAY_V2')"
            >
              <keep-alive>
                <PaymentList :datailId="proId" />
              </keep-alive>
            </a-tab-pane>
            <a-tab-pane key="3" :tab="$t('all.autotext402')" v-if="$auth('PROJECT.PROJECT_BUDGET_V2')">
              <keep-alive>
                <BudgetList :datailId="proId" :serviceCharge="Boolean(serviceCharge)" :budget-amt="dataInfo.budget"
                            @handleOk="handBudget"
                />
              </keep-alive>
            </a-tab-pane>
            <a-tab-pane key="2" :tab="$t('all.autotext290')" v-if="$auth('PROJECT.PROJECT_INCOME_V2')">
              <a-tabs :activeKey="payKey" @change="handleTabsPaneChange">
                <a-tab-pane :tab="$t('all.autotext1548')" key="4">
                  <keep-alive>
                    <FinanceList :datailId="proId" :offline="1" />
                  </keep-alive>
                </a-tab-pane>
                <a-tab-pane :tab="$t('all.autotext1531')" key="5">
                  <keep-alive>
                    <FinanceList :datailId="proId" :offline="2" />
                  </keep-alive>
                </a-tab-pane>
              </a-tabs>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </a-col>
  </div>
</template>

<script>
import moment from 'moment'
import { getPaymentList, costExport } from '@/api/project/finance'
import { listFeeCategory, listAndFinanceRole, checkColor, pack, download, fileDelete } from '@api/dashboard/dashboard'
import { buildPaginationObj } from '@/components/Table'
import { exportZipcom, exportExcel } from '@/utils/util'
// import PaymentList from '@/views/overview/detail/treasurer/components/payment/PaymentList'
import BudgetList from '@/views/overview/detail/treasurer/components/budget/budgetList'
import FinanceList from '@/views/overview/detail/treasurer/components/finance/FinanceList'
import { OFFLINE_TYPE } from '@/constants/common'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  components: { BudgetList, FinanceList },
  props: ['allCenterList', 'proId', 'listVisitStageOption', 'isHome'],
  data () {
    return {
      checkPackStatus: '0', // 下载文件打包状态
      timer: null, // 定时器
      exporting: false,
      queryParam: {
        orgId: '',
        proId: localStorage.getItem('CURRENT_PROID'),
        type: '',
        status: '',
        bTime: '',
        eTime: '',
        bTimeForPayTime: '',
        eTimeForPayTime: '',
        sAmount: '',
        bAmount: '',
        stageId: '',
        roleIdAndTypeStr: ''
      },
      exportParams: {},
      roleList: [],
      timeArr: [],
      timeApplyArr: [],
      columns: [
        // 申请单号
        {
          title: this.$t('all.autotext1156'),
          dataIndex: 'applyNo',
          width: 150,
          fixed: 'left'
        },
        // 研究中心
        {
          title: this.$t('all.autotext949'),
          dataIndex: 'researchCenterNo',
          width: 200,
          customRender: (text, record) => {
            return `${record.orgNo} - ${record.orgName}`
          }
        },
        // 支付方式
        {
          title: this.$t('all.autotext1787'),
          dataIndex: 'offline',
          width: 150,
          customRender: (text) => {
            return this.$options.filters.enumValueByKey(
              Number(text),
              this.$const.OFFLINE_TYPE
            )
          }
        },
        // 申请者编号
        {
          title: this.$t('all.autotext1521'),
          dataIndex: 'createAccount',
          width: 150,
          customRender: (text, record) => {
            return `${record.createRoleName} - ${record.createAccount}`
          }
        },
        // 收款者编号
        {
          title: this.$t('all.autotext597'),
          dataIndex: 'bankNo',
          width: 150,
          customRender: (text, record) => {
            return `${record.pstRoleName} - ${record.ptsNo}`
          }
        },
        // 申请金额
        {
          title: this.$t('all.autotext867'),
          dataIndex: 'totalAmount',
          width: 100,
          customRender: (text, record) => {
            return `¥${record.totalAmount}`
          }
        },
        // 支付单号
        {
          title: this.$t('all.autotext944'),
          dataIndex: 'payNo',
          width: 150,
          customRender: (text, record) => {
            return text || '-'
          }
        },
        // 服务费用金额
        {
          title: this.$t('all.autotext1543'),
          dataIndex: 'serviceAmount',
          width: 100,
          customRender: (text, record) => {
            return `¥${record.serviceAmount}`
          }
        },
        // 申请时间
        {
          title: this.$t('all.autotext244'),
          dataIndex: 'createTime',
          width: 150,
          customRender: (text, record) => {
            return moment(text).format('YYYY-MM-DD HH:mm:ss')
          }
        },
        // 付款时间
        {
          title: this.$t('all.autotext82'),
          dataIndex: 'payTime',
          width: 150,
          customRender: (text, record) => {
            return text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '-'
          }
        },
        // 访视阶段
        {
          title: this.$t('all.autotext1049'),
          dataIndex: 'stage',
          width: 150
        },
        // 申请类目
        {
          title: this.$t('all.autotext1278'),
          dataIndex: 'applyType',
          width: 150
        },
        // 申请事由
        {
          title: this.$t('all.autotext1828'),
          dataIndex: 'applyReason',
          width: 150,
          scopedSlots: { customRender: 'applyReason' }
        },
        // 当前审核节点
        {
          title: this.$t('all.autotext1687'),
          dataIndex: 'currentAudit',
          width: 150
        },
        // 最新审批时间
        {
          title: this.$t('all.autotext1688'),
          dataIndex: 'latestAudit',
          width: 150,
          customRender: (text, record) => {
            return text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '-'
          }
        },
        // 当前状态
        {
       

          title: this.$t('all.autotext1466'),
          dataIndex: 'now',
          width: 100
        },
        {
          title: this.$t('all.autotext187'),
          key: 'operate',
          width: 100,
          scopedSlots: { customRender: 'operate' },
          fixed: 'right'
        }
      ],
      dataInfo: {},
      applyNum: [
        // 申请总次数
        {
          name: this.$t('all.autotext410'),
          num: 0
        },
        // 申请待审核
        {
          // name: this.$t('all.autotext759'),
          name: this.$t('all.autotext1618'),
          num: 0
        },
        // 申请审核中
        {
          name: this.$t('all.autotext759'),
          num: 0
        },
        // 申请支付失败
        {
          // name: this.$t('all.autotext13'),
          name: this.$t('all.autotext1620'),
          num: 0
        },
        // 申请审核结束
        {
          // name: this.$t('all.autotext1097'),
          name: this.$t('all.autotext1621'),
          num: 0
        },
        // 申请已完成
        {
          // name: this.$t('all.autotext180'),
          name: this.$t('all.autotext1622'),
          num: 0
        },
        // 申请待报税 
        // {
        //   // name: this.$t('all.autotext180'),
        //   name: this.$t('all.autotext1623'),
        //   num: 0
        // },
        // 申请待补充资料
        {
          // name: this.$t('all.autotext180'),
          name: this.$t('all.autotext1624'),
          num: 0
        },
        // 申请支付中
        {
          // name: this.$t('all.autotext180'),
          name: this.$t('all.autotext1625'),
          num: 0
        },
        // 申请已驳回
        {
          name: this.$t('all.autotext1626'),
          num: 0
        },
        // 申请已撤回
        {
          name: this.$t('all.autotext1627'),
          num: 0
        },
        // 申请已关闭
        {
          name: '已关闭',
          num: 0
        }
      ],
      costNum: [
        {
          name: this.$t('all.autotext1016'),
          num: '0.00'
        },
        {
          name: this.$t('all.autotext1398'),
          num: '0.00'
        }
      ],
      costNumBreak: [
        {
          name: this.$t('all.autotext1539'),
          num: '0.00'
        },
        {
          name: this.$t('all.autotext1541'),
          num: '0.00'
        },
        {
          name: this.$t('all.autotext1540'),
          num: '0.00'
        },
        {
          name: this.$t('all.autotext1542'),
          num: '0.00'
        }
      ],

      categoryOptions: [],
      isFinanceDetailSkip: '3',
      payKey: '4'
    }
  },
  computed: {
    OFFLINE_TYPE () {
      return OFFLINE_TYPE
    },
    serviceCharge () {
      const { serviceFee } = this.dataInfo

      return serviceFee || 0
    },
    applyTypeDisabled () {
      // 研究者
      if (this.queryParam.type === 1) {
        return !this.queryParam.orgId
      } else {
        return !this.queryParam.orgId || !this.queryParam.stageId
      }
    }
  },
  mounted () {
    this.getListAndFinanceRole()
    this.getSkip()
    if (!this.$auth('PROJECT.FEE_APPLY_LIST_TIME')) {
      this.columns = this.columns.filter(
        (item) => item.dataIndex !== 'serviceAmount'
      )
    }
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    loadData (parameter) {
      this.exportParams = Object.assign(parameter, this.queryParam)
      this.scheduledCheck()
      return getPaymentList(this.exportParams).then(res => {
        this.dataInfo = res
        // 申请次数
        this.applyNum[0].num = res.recordApplyTotalCount || 0
        this.applyNum[1].num = res.recordApplyTotalCount30 || 0
        this.applyNum[2].num = res.recordApplyTotalCount31 || 0
        this.applyNum[3].num = res.recordApplyTotalCount50 || 0
        this.applyNum[4].num = res.recordApplyTotalCount70 || 0
        this.applyNum[5].num = res.recordApplyTotalCount60 || 0
        this.applyNum[6].num = res.recordApplyTotalCount41 || 0
        // this.applyNum[7].num = res.recordApplyTotalCount20 || 0
        this.applyNum[7].num = res.recordApplyTotalCount51 || 0
        this.applyNum[8].num = res.recordApplyTotalCount1 || 0
        this.applyNum[9].num = res.recordApplyTotalCount11 || 0
        this.applyNum[10].num = res.recordApplyClosedTotalCount || 0

          this.costNum[0].num = (res.paid || 0).toFixed(2)
          this.costNum[1].num = (res.listTopay || 0).toFixed(2)

          this.costNumBreak[0].num = (res.studyListPaid || 0).toFixed(2)
          this.costNumBreak[1].num = (res.studyListToPay || 0).toFixed(2)
          this.costNumBreak[2].num = (res.serverListPaid || 0).toFixed(2)
          this.costNumBreak[3].num = (res.serverListTopay || 0).toFixed(2)
          if (this.$auth('PROJECT.FEE_APPLY_LIST')) {
            return res.page
          } else {
            return Promise.resolve(buildPaginationObj([]))
          }
        }
      )
    },
    scheduledCheck () {
      this.check()
      if (this.timer !== null) return
      this.timer = setInterval(() => {
        this.check()
      }, 5000)
    },
    check () {
      let cacheToken = storage.get(ACCESS_TOKEN)
      if (!cacheToken) {
        clearInterval(this.timer)
        this.timer = null
        return
      }
      checkColor(this.exportParams).then((res) => {
        this.checkPackStatus = res
        if (res === '1') {
          clearInterval(this.timer)
          this.timer = null
        } else if (res === '2') {
          this.$message.warning('打包出现异常，请联系管理员')
          clearInterval(this.timer)
          this.timer = null
        }
      }).catch(() => {
        clearInterval(this.timer)
        this.timer = null
      })
    },
    async downloadFile () {
      try {
        const res = await download(this.exportParams)
        exportZipcom(`${this.$t('all.autotext246')}`, res)
        await fileDelete(this.exportParams)
        this.scheduledCheck()
      } catch (error) {
        this.checkPackStatus = '2'
        this.$notification.error({
          message: '下载错误',
          description: '下载失败，请联系管理员或重新打包'
        })
      }
    },
    async onPack () {
      try {
        const res = await pack(this.exportParams)
        this.checkPackStatus = '0'
        if (res === '打包完成') {
          this.downloadFile()
        } else if (res === '正在打包') {
          this.scheduledCheck()
        } else {
          this.checkPackStatus = '2'
          this.$message.warning(res)
        }
      } catch (err) {
      }
    },
    async getListAndFinanceRole () {
      const res = await listAndFinanceRole({
        proId: localStorage.getItem('CURRENT_PROID')
      })
      this.roleList = res
    },
    // 获取费用类目
    async listFeeCategory () {
      if (!this.queryParam.type) {
        return false
      }
      const res = await listFeeCategory({
        proId: localStorage.getItem('CURRENT_PROID'),
        type: this.queryParam.type
      })
      this.categoryOptions = res
    },
    roleChange (e) {
      if (!e) {
        this.queryParam.roleIdAndTypeStr = ''
        return
      }
      const _filter = this.roleList.filter((item) => item.id === e)[0].pro
      this.queryParam.roleIdAndTypeStr = `${e}#${_filter}`
    },
    getSkip () {
      if (this.$store.state.app.financeKey) {
        this.isFinanceDetailSkip = this.$store.state.app.financeKey
      }
      if (this.$auth('PROJECT.PROJECT_PAY_V2')) {
        this.isFinanceDetailSkip = '1'
      } else

      if (this.$auth('PROJECT.PROJECT_INCOME_V2')) {
        this.isFinanceDetailSkip = '2'
      } else if (this.$auth('PROJECT.PROJECT_BUDGET_V2')) {
        this.isFinanceDetailSkip = '3'
      }
    },
    // 费用类目
    listVisitStageChange () {
      this.$set(this.queryParam, 'applyType', '')
      this.listFeeCategory()
    },
    changeCreateTime (date, dateString) {
      this.queryParam.bTime = dateString[0]
      this.queryParam.eTime = dateString[1]
    },
    changePayTime (date, dateString) {
      this.queryParam.bTimeForPayTime = dateString[0]
      this.queryParam.eTimeForPayTime = dateString[1]
    },
    // 点击查看进入详情页
    clickViewDetail (record) {
      this.$router.push({ name: 'PaymentDetail', query: { ...record } })
    },
    clickExport () {
      const exportParams = this.queryParam
      exportParams.pageSize = this.pageSize
      costExport(exportParams).then((res) => {
        exportExcel(this.$t('all.autotext246'), res.data)
      })
    },
    handleReast () {
      this.timeArr = []
      this.timeApplyArr = []
      this.queryParam.bTime = ''
      this.queryParam.eTime = ''
      this.queryParam.bTimeForPayTime = ''
      this.queryParam.eTimeForPayTime = ''
      this.queryParam.sAmount = ''
      this.queryParam.bAmount = ''
      this.queryParam.roleIdAndTypeStr = ''
      this.$refs.formRef.resetFields()
      this.$refs.table.refresh(true)
    },
    // tab栏切换
    handleTabsChange (key) {
      this.isFinanceDetailSkip = key
      this.$store.commit('changeFinanceKey', key)
    },
    handleTabsPaneChange (key) {
      this.payKey = key
    },
    handBudget () {
      this.$refs.table.refresh(true)
    }
  },
  watch: {
    proId (val) {
      if (val) {
        for (let key in this.queryParam) {
          this.$set(this.queryParam, key, '')
        }
        this.queryParam.proId = val
        this.$nextTick(() => {
          this.$refs.table.refresh(true)
          this.$forceUpdate()
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.apply-row {
  border: 1px solid #e5ebf3;
  margin-top: 20px;

  .apply-col {
    padding: 20px;

    &:last-child {
      border: none;
    }

    /deep/.ant-descriptions-item>span {
      font-size: 16px;
    }

    /deep/.ant-descriptions-item .ant-descriptions-item-colon {
      color: #8193b1;
    }

    .apply-cost-col {
      padding-top: 24px;
      .apply-cost-col-name {
        color: #8193b1;
        font-size: 16px;
      }

      .apply-cost-col-num {
        font-size: 24px;

        em {
          font-style: normal;
          font-size: 16px;
        }

        // font-weight: bold;
      }
    }

    .apply-cost-col-break {
      color: #8193B1;
      font-size: 14px;
      margin-top: 10px;

      span:nth-child(2) {
        color: #000;
      }
    }

    .apply-service {
      font-size: 16px;
      margin-top: 30px;
      span {
        color: #8193b1;
      }
      span:nth-child(2) {
        font-size: 24px;
        // font-weight: bold;
        color: #000;
      }
    }
  }
  .border{
    border-right: 1px solid #E5EBF3;

  }
}
.mt{
  padding-top: 46px !important;
}

.reason{
  display: inline-block;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.reason-wrap{
  max-width: 300px;
  word-wrap: break-word;
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  max-height: 600px;
  overflow-y: auto;
}
</style>
